@extends('layouts.app')
@section('header')
    <link rel="stylesheet" href="{{asset('css/vendor/jquery.atwho.css')}}">
@endsection
@section('content')
    <thread-view :thread="{{$thread}}" inline-template v-cloak>
        <div class="container">
            <div class="row">
                <div class="col-md-8" v-cloak>
                    @include('threads._topic')
                    <replies @added="repliesCount++" @removed="repliesCount--"></replies>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <p>
                                This thread was published {{ $thread->created_at->diffForHumans() }} by
                                <a href="#">{{ $thread->creator->name }}</a>,and currently has
                                <span v-text="repliesCount"></span> {{ str_plural('comment', $thread->replies_count) }}.
                            </p>
                            <div class="level">
                                <div>
                                    <subscribe-button :active="{{ json_encode($thread->isSubscribedTo)}}">
                                    </subscribe-button>
                                </div>

                                <div class="ml-3">
                                    <button class="btn btn-outline-danger" v-if="authorize('isAdmin')"
                                            @click="toggleLock" v-text="locked ? 'Unlock': 'Lock'">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </thread-view>
@endsection
